<template>
    <scroll-view scroll-y @scroll="onScroll" :scroll-into-view="pos" style="height: 80vh;z-index: 1000;">

        <view>


            <view id="top"  style="width: 100%;">
                <myParse :content="_detail.content1" style="width: 100vw;" v-if="_detail.content1"></myParse>
            </view>

            <MidLayout>
                <view v-for="item, index in _detail.color_atlas">
                    <IndexTitle right-text="查看全部" :zh_text="item.title" :en_text="item.en_title"
                        @handleRightText="handleRightText2(item,item.layout)"></IndexTitle>


                    <Relatives icon-name="more" en="RELATIVES" :relatives="item.relatives" :layout="item.layout"
                    detail_url="/pages/detail/index2" collect_url="/api/onlyforone/colorAtlasProductCollection/add"
                    cancel_collect_url="/api/onlyforone/colorAtlasProductCollection/delete"
                     />
                </view>
                <u-divider></u-divider>
                <IndexTitle right-text="查看全部" :zh_text="_detail.relative_text" :en_text="_detail.en_relative_text"
                    @handleRightText="handleRightText(_detail.relatives_id,_detail.relatives_level_two_category_id)"></IndexTitle>


                <Relatives icon-name="more" en="RELATIVES" :relatives="_detail.relatives"
                 detail_url="/pages/detail/index" collect_url="/api/onlyforone/collection/add"
                    cancel_collect_url="/api/onlyforone/collection/delete"
                 />
            </MidLayout>


        </view>


    </scroll-view>
</template>

<script setup lang="ts">
import { ref, defineProps, watch, defineEmits, computed } from 'vue'
import myParse from '@/components/loading-parse'
import IndexTitle from '@/pages/walls/index-title.vue'
import Relatives from '@/pages/walls/relatives.vue'
import request from '@/config/axios'


const onScroll = () => {
    if (pos.value) {
        pos.value = ''
    }
}


const emits = defineEmits(['setTitle']);

const pos = ref('top')
const _detail = ref({})

const props = defineProps({
    index: Number,
    show: {
        type: Boolean,
        default: false
    },
    url: {
        type: String,
        default: ''
    },
    
})




watch(() => [props.index, props.show], ([newCount, newName], [oldCount, oldName]) => {
   
    request.get({ url: props.url }).then(res => {

        if (res.content1) {
            res.content1 = res.content1.replace(`style=""`, `style="width:100%;"`)
        } else {
            res.content1 = ''
        }
        emits('setTitle', res.title, res.share_cover_url)
        _detail.value = res
    })

    if (newName) {
        pos.value = 'top'
    }
}, { deep: true })




const handleRightText = (id,relatives_level_two_category_id) => {

    uni.navigateTo({
        url: `/pages/hardware/detail?level_one_category_id=${id}&level_two_category_id=${relatives_level_two_category_id}`
    })
}

const handleRightText2 = (item,layout) => {

    // debugger
    uni.navigateTo({
        url: `/pages/search/index2?id=${item.id}&title=${item.title}&layout=${layout}`
    })
}




</script>

<style scoped>
/* 按钮容器样式 */
.button-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    /* 按钮之间的间距 */
}

.button {
    display: inline-block;
    padding: 4rpx 14rpx;
    border-radius: 12rpx;
    background-color: #000;
    color: goldenrod;
    font-size: 20rpx;

    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
}

.right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* padding: 20rpx; */
    /* border: 1px solid #ccc; */
    border-radius: 10rpx;
    width: calc(100% - 200rpx);

}

.right-top {

    width: 100%;
    overflow: hidden;
}

.right-bot {


    position: relative;

}

.left {
    width: 180rpx;
    height: 180rpx;
    background: #000;
    border-radius: 8rpx;
    overflow: hidden;
}

.card-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20rpx;
}

.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 按钮通用样式 */
</style>